<template>
  <div>
    <el-form :model="userInfo" ref="abc">
      <el-form-item label="用户名：" prop="username">
        <el-input v-model="userInfo.username"></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input v-model="userInfo.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-info" @click="login"
          >提交</el-button
        >
        <el-button icon="el-icon-delete" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-form
      ref="player"
      class="player"
      :model="player"
      :rules="rules"
      label-position="right"
      label-width="auto"
    >
      <el-form-item prop="name" label="角色名：">
        <el-input v-model.trim="player.name"> </el-input>
      </el-form-item>
      <!--        writer repaireman driver -->
      <!--        0，    1，    2-->
      <!--        作家 维修员 司机-->

      <el-form-item prop="profession" label="职业：">
        <!--        <el-radio-group v-model="player.profession">-->
        <!--            <el-radio v-for="e in professions" :key="e.index"-->
        <!--                      :label="e.value">{{e.text}}</el-radio>-->
        <!--        </el-radio-group>-->
        <el-select v-model="player.profession">
          <!--   <el-option value="dirver" label="司机"></el-option>-->
          <el-option
            v-for="e in professions"
            :key="e.index"
            :value="e.value"
            :label="e.text"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="money" label="金钱：">
        <el-input type="number" v-model.number="player.money"> </el-input>
      </el-form-item>
      <el-form-item prop="hobbies" label="业务爱好：">
        <el-checkbox-group v-model="player.hobbies">
          <el-checkbox label="football">足球</el-checkbox>
          <el-checkbox label="basketball">篮球</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="playerSubmit()"
          >提交
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-remove"
          @click="() => $refs.player.resetFields()"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import New from './components/New.vue';

export default {
  name: "SomeOne",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      userInfo: {
        username: "",
        password: "",
      },
      player: {
        name: "zhangjiu",
        profession: null,
        money: 12,
        hobbies: [],
      },

      professions: [
        {
          index: 0,
          value: "writer",
          text: "作家",
        },
        {
          index: 1,
          value: "repaireman",
          text: "维修工",
        },
        {
          index: 2,
          value: "driver",
          text: "司机",
        },
        {
          index: 3,
          value: "runner",
          text: "运动员",
        },
      ],
      // rules: {
      //   username: [
      //     { required: true, message: "请输入账号", trigger: "blur" },
      //     {
      //       //使用中括号确定取值范围 使用大括号确定取值个数
      //       //[abc]{3}
      //       pattern: /^\w+$/,
      //       message: "请输入字母/数字/下划线",
      //       trigger: ["blur", "change"],
      //     },
      //     { validator: this.validateItem, trigger: "blur" },
      //   ],
      //   password: [{ required: true, message: "请输入密码", trigger: "change" }],
      // },
      rules: {
        name: [
          {
            pattern: /^\w{4,12}$/,
            message: "请输入字母/数字/下划线，4到8个之间",
            trigger: "blur",
          },
        ],
        money: [{ validator: this.validateMoney, trigger: "blur" }],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {

  },
  mounted() {},
  methods: {
    sampleM() {},
    login() {
      // this.$message.error(JSON.stringify(this.userInfo))

      this.$message.success(JSON.stringify(this.userInfo));
    },
    reset() {
      this.$refs.abc.resetFields();
    },
    playerSubmit() {
      this.$refs.player.validate((valid) => {
        if (valid) {
          this.$message.success("将要发送： " + JSON.stringify(this.player));
        } else {
          this.$message.error("验证不通过请重新填写表单");
        }
      });
    },
    validateMoney(rule, value, callback) {

      let v = this.player.money;
      if (v < 0 || v > 100) {
        callback(new Error("金额必须0-100之间"));
      }
      if (v % 2 === 1) {
        callback(new Error("金额必须是偶数"));
      }
      callback();
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.player {
  width: 400px;
}
</style>
